<template>
	<view>
		<view class="fixed-top">
			<v-tabs  activeColor="#077B86" lineColor="#077B86" lineHeight="6rpx" :scroll="false"
				v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
		</view>

		<mescroll-body style="position: absolute;top: 96rpx;width: 100%;background-color: #F9F9F9;" ref="mescrollRef"
			@init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="zy-col">
				<view v-if="current == 0" v-for="(item,index) in list" :key="index" class="zy-col list-item">
					<view class="zy-row ">
						<text class="mdx-title">{{item.title}}</text>
						<text class="status" :class="'status-'+item.status">{{statusList[item.status]}}</text>
					</view>
					<view class="zy-row">
						<text class="mdx-tiem-text">{{item.creationTime}}</text>
						<text class="mdx-money">+{{item.money.toFixed(2)}}</text>
					</view>
				</view>
				<view v-if="current == 1" v-for="(item,index) in list1" :key="index" class="zy-col list-item">
					<view class="zy-row">
						<view class="zy-col">
							<text class="mdx-title">编号：{{item.orderId}}</text>
							<text class="mdx-tiem-text">{{item.creationTime}}</text>
							<text class="mdx-tiem-text ellipsis-1">{{item.address}}</text>
						</view>
						<text class="mdx-money">+{{item.money.toFixed(2)}}</text>
					</view>
				</view>
				<image v-if="!list.length" class="no-data-img" src="/static/image_default_graph.png" mode="widthFix"></image>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				current: 0,
				tabs: ['提现','收益'],
				statusList: ['申请', '已打款', '驳回：系统更新', '提现失败'],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: true,
					textNoMore: "已经到底了～",
					empty: {
						tip: '暂无任何收益记录～'
					}
				},
				list: [{
						title: "提现",
						status: 1,
						creationTime: "2022-05-31 10:56",
						money: 600.55,
					},
					{
						title: "提现",
						status: 3,
						show: false,
						creationTime: "2022-01-21 11:56",
						money: 188,
					},
					{
						title: "提现",
						status: 2,
						show: false,
						creationTime: "2022-04-11 12:56",
						money: 88,
					}
				],
				list1: [{
						orderId: "T73648873959357",
						creationTime: "2022-05-31 10:56",
						money: 600.55,
						address:"浙江省杭州市西湖区幽梦商业大赏区幽梦商业大浙江省杭州市西湖区幽梦商业大赏区幽梦商业大"
					},
					{
						orderId: "T73648873959357",
						creationTime: "2022-01-21 11:56",
						money: 188,
						address:"浙江省杭州市西湖区幽梦商业大赏区幽梦商业大浙江省杭州市西湖区幽梦商业大赏区幽梦商业大"
					},
					{
						orderId: "T73648873959357",
						creationTime: "2022-04-11 12:56",
						money: 88,
						address:"浙江省杭州市西湖区幽梦商业大赏区幽梦商业大浙江省杭州市西湖区幽梦商业大赏区幽梦商业大"
					}
				],
			};
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url
				})
			},
			changeTab(index) {
				console.log('当前选中的项：' + index)
			},
			//刷新
			resetUpScroll() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			async upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }
				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.isInitxx){
				// 	apiGetxx().then(res=>{
				// 		this.isInitxx = true
				// 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// 	}).catch(()=>{
				// 		this.mescroll.endErr()
				// 	})
				// 	return // 此处return,先获取xx
				// }
				this.queryList(page);
				//联网加载数据
				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

				//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				//this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)

				//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
				//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

				//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
				//this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

			},
			//查询作业订单列表
			queryList(page) {
				// this.$util.doPostJson(this.$api.missionListUrl, {
				// 	memberId: getApp().globalData.userInfo.id,
				// 	userType: "2",
				// 	isAppEexecuting: "0",
				// 	pageSize: 10,
				// 	pageNumber: page.num
				// }, {}, true).then(res => {
				// 	uni.stopPullDownRefresh();
				// 	if (res.data.code == this.$ResponseStatus.OK) {
				// 		let dataList = res.data.data.list
				// 		dataList.forEach(item => {
				// 			item.distance = this.$util.getDistance(item.consigneeLongitude,
				// 			 item.consigneeLatitude,item.consignorLongitude,
				// 			  item.consignorLatitude);
				// 		})
				// 		this.$forceUpdate()
				// this.mescroll.endBySize(res.list.length, totalSize);
				setTimeout(() => {
					this.mescroll.endBySize(5, 10);
				}, 1000)

				// 		//设置列表数据
				// 		if (page.num == 1) this.orderList = []; //如果是第一页需手动制空列表
				// 		this.orderList = this.orderList.concat(dataList); //追加新数据
				// 	}
				// }).catch(error => {
				// 	console.log(error)
				// })

			}
		}
	}
</script>

<style lang="scss">
	.list-item {
		margin-top: 24rpx;
		padding: 20rpx 28rpx;
		background-color: #fff;

		.zy-row{
			align-items: center;
			justify-content: space-between;
		}
		
		.mdx-title{
			font-size: 28rpx;
			font-weight: 600;
			line-height: 48rpx;
		}
		.mdx-tiem-text{
			font-size: 24rpx;
			color: #666666;
			line-height: 48rpx;
		}
		.mdx-money{
			font-size: 32rpx;
			font-weight: 600;
			color: $globalColor;
			line-height: 48rpx;
		}
		
		
		
		.status {
			font-size: 24rpx;
			line-height: 36rpx;
			color: #999999;
			&-0 {
				color: #FF2A44;
			}

			&-1 {
				color: #FF2A44;
			}

			&-2 {
				color: #999999;
			}

			&-3 {
				color: #999999;
			}
		}
	}

	.fixed-top {
		width: 100%;
		height: 96rpx;
		top: 0rpx;
		position: absolute;
	}

</style>
